<template>
	<div class="main">
		<div class="py-container">
			<!-- 面包屑 -->
			<div class="bread">
				<ul class="fl sui-breadcrumb">
					<li>
						<a href="javascript:;">全部结果</a>
					</li>
				</ul>
				<ul class="fl sui-tag">
					<li class="with-x" v-if="searchParams.categoryName">
						{{ searchParams.categoryName }}<i @click="removeCategory">×</i>
					</li>
					<li class="with-x" v-if="searchParams.keyword">
						{{ searchParams.keyword }}<i @click="removeKeyword">×</i>
					</li>
					<li class="with-x" v-if="searchParams.trademark">
						{{ searchParams.trademark.split(':')[1] }}<i @click="removeTrademark">×</i>
					</li>
					<li class="with-x" v-for="(item, index) in searchParams.props" :key="index">
						{{ item.split(':')[1] }}<i @click="removeProps(index)">×</i>
					</li>
				</ul>
			</div>
			<AttrsList @trademark="trademark" @attrInfo="attrInfo" />
			<GoodsList :order="searchParams.order" />
			<pagination
				:pageNo="searchParams.pageNo"
				:pageSize="searchParams.pageSize"
				:totalPages="dataListObj.totalPages"
				:continues="5"
				@changePage="changePage"
			/>
			<HotSellers />
		</div>
	</div>
</template>

<script>
import AttrsList from '@/pages/Search/SearchSelector/AttrsList';
import GoodsList from '@/pages/Search/SearchSelector/GoodsList';
import HotSellers from '@/pages/Search/SearchSelector/HotSellers';
import { mapState } from 'vuex';
export default {
	name: 'SearchSelector',
	data() {
		return {
			// post请求信息
			searchParams: {
				category1Id: '',
				category2Id: '',
				category3Id: '',
				categoryName: '',
				keyword: '',
				order: '1:desc',
				pageNo: 1,
				pageSize: 3,
				props: [],
				trademark: '',
			},
		};
	},
	computed: {
		...mapState('search', ['dataListObj']),
	},
	components: {
		AttrsList,
		GoodsList,
		HotSellers,
	},
	beforeMount() {
		// methods挂载完毕前初始化路由信息
		Object.assign(this.searchParams, this.$route.query, this.$route.params);
	},
	methods: {
		// 派发actions,向服务器发起请求
		getSearchList() {
			this.$store.dispatch('search/getDataList', this.searchParams);
		},
		// 删除分类(面包屑)
		removeCategory() {
			this.searchParams.categoryName = undefined;
			this.searchParams.category1Id = undefined;
			this.searchParams.category2Id = undefined;
			this.searchParams.category3Id = undefined;
			// 删除面包屑后跳转路由 使url路径初始化
			// 当路由中有params参数 跳转时进行添加
			if (this.$route.params) {
				this.$router.push({ name: 'search', params: this.$route.params });
			}
		},
		// 删除搜索(面包屑)
		removeKeyword() {
			this.searchParams.keyword = undefined;
			// 删除面包屑后跳转路由 使url路径初始化
			// 当路由中有query参数 跳转时进行添加
			if (this.$route.query) {
				// 删除搜索框的参数
				this.$bus.$emit('clearValue');
				this.$router.push({ path: '/search', query: this.$route.query });
			}
		},
		// 删除品牌(面包屑)
		removeTrademark() {
			this.searchParams.trademark = undefined;
			this.getSearchList();
		},
		// 删除商品属性(面包屑)
		removeProps(value) {
			// 删除指定属性
			this.searchParams.props.splice(value, 1);
			this.getSearchList();
		},
		// 点击品牌发请求
		trademark(data) {
			this.searchParams.trademark = `${data.tmId}:${data.tmName}`;
			this.getSearchList();
		},
		// 点击商品属性发请求
		attrInfo(value, item) {
			let data = `${value.attrId}:${item}:${value.attrName}`;
			// 判断props中是否有重复参数
			if (!this.searchParams.props.includes(data)) this.searchParams.props.push(data);
			// 重新发起请求
			this.getSearchList();
		},
		// 点击分页修改参数并发起请求
		changePage(num) {
			this.searchParams.pageNo = num;
			this.getSearchList();
		},
	},
	mounted() {
		// 进入页面发起一次请求
		this.getSearchList();
		// 接收order参数
		this.$bus.$on('changeOrderData', data => {
			// 修改order参数并重新发送请求
			this.searchParams.order = data;
			this.getSearchList();
		});
	},
	watch: {
		// 当路由发生变化时重新发送请求
		$route() {
			// 重新获取路由信息
			Object.assign(this.searchParams, this.$route.query, this.$route.params);
			// 调用接口函数
			this.getSearchList();
			this.searchParams.category1Id = '';
			this.searchParams.category2Id = '';
			this.searchParams.category3Id = '';
		},
	},
	beforeDestroy() {
		this.$bus.$off('changeOrderData');
	},
};
</script>

<style scoped>
.main {
	margin: 10px 0;
}
.main .py-container {
	width: 1200px;
	margin: 0 auto;
}
.py-container .bread {
	margin-bottom: 5px;
	overflow: hidden;
}
.py-container .bread .sui-breadcrumb {
	padding: 3px 15px;
	margin: 0;
	font-weight: 400;
	border-radius: 3px;
	float: left;
}
.py-container .bread .sui-breadcrumb li {
	display: inline-block;
	line-height: 18px;
}
.py-container .bread .sui-breadcrumb li a {
	color: #666;
	text-decoration: none;
}
.py-container .bread .sui-breadcrumb li a:hover {
	color: #4cb9fc;
}
.py-container .bread .sui-tag {
	margin-top: -5px;
	list-style: none;
	font-size: 0;
	line-height: 0;
	padding: 5px 0 0;
	margin-bottom: 18px;
	float: left;
}
.py-container .bread .sui-tag .with-x {
	font-size: 12px;
	margin: 0 5px 5px 0;
	display: inline-block;
	overflow: hidden;
	color: #000;
	background: #f7f7f7;
	padding: 0 7px;
	height: 20px;
	line-height: 20px;
	border: 1px solid #dedede;
	white-space: nowrap;
	transition: color 400ms;
	cursor: pointer;
}
.py-container .bread .sui-tag .with-x i {
	margin-left: 10px;
	cursor: pointer;
	font: 400 14px tahoma;
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.py-container .bread .sui-tag .with-x:hover {
	color: #28a3ef;
}
</style>
